<!-- 设备巡检-巡检模板-查看页面 -->
<template>
  <div>
    <div :class="['view-equip-detail', type === 'comp' ? 'view-comp' : ''].join(' ')">
      <div v-if="type !== 'comp'" class="view-equip-header-detail">
        <div class="flex-row">
          <px-button type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
          <div class="text">{{ baseInfoFormValue.temName }}&nbsp;{{ baseInfoFormValue.temCode }}</div>
        </div>
        <div>
          <px-button v-has="'ALL_EQUIP_INSPECT_TEMPLATE_DELETE'" type="primary" plain @click="handleDelete">删除</px-button>
          <px-button v-has="'ALL_EQUIP_INSPECT_TEMPLATE_COPY_PAGE'" type="primary" plain @click="handleCopy">复制</px-button>
          <px-button v-has="'ALL_EQUIP_INSPECT_TEMPLATE_EDIT_PAGE'" type="primary" plain @click="handleEdit">编辑</px-button>
        </div>
      </div>
      <px-scrollbar :class="['view-flex', type === 'comp' ? 'view-flex-comp' : ''].join(' ')">
        <div class="view-equip-title">基础信息</div>
        <ColumnsTable
          :columns="baseInfoFormValue.inspectContentType === 1 ? INSPECTT_TEMPLATE_EQUIP_BASEINFO_COLUMNS : INSPECTT_TEMPLATE_ENV_BASEINFO_COLUMNS"
          :data="baseInfoFormValue"
        >
          <template #value="{ scope }">
            <template v-if="scope.prop === 'inspectAreaDesc' && baseInfoFormValue.inspectAreaDesc">
              <px-scrollbar max-height="150px">
                <px-tag
                  v-for="(item, index) in baseInfoFormValue.inspectAreaDesc.split(',')"
                  :key="index"
                  class="ml-2 mt-[2px] mb-[2px]"
                  type="info"
                  >{{ item }}</px-tag
                >
              </px-scrollbar>
            </template>
          </template></ColumnsTable
        >
        <div class="view-equip-title">巡检内容</div>
        <div v-for="(item, index) in templateContentDTOList" :key="index">
          <EditDropDown v-if="item.inspectItemType === 2" :dropdownTitle="item.inspectItemContent">
            <template v-slot:content>
              <px-table :data="item.contentItemDTOList" style="margin-bottom: 18px" class="equip-table" size="small" max-height="400" border>
                <px-table-column v-if="item.isTableEdit === 'view'" fixed="left" label="" align="center" width="60">
                  <px-icon><ViewList /></px-icon>
                </px-table-column>
                <px-table-column v-if="item.isTableEdit === 'view'" fixed="left" type="index" label="序号" width="60" />
                <px-table-column
                  v-if="baseInfoFormValue.inspectContentType === 1"
                  fixed="left"
                  prop="eqpStatusList"
                  label="适用设备状态"
                  min-width="160"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    <div>{{ renderEqpList(scope.row.eqpStatusList) }}</div>
                  </template>
                </px-table-column>
                <px-table-column fixed="left" prop="inspectItem" label="巡检项" min-width="160" show-overflow-tooltip />
                <px-table-column prop="inspectContent" label="巡检内容" min-width="100" show-overflow-tooltip />
                <px-table-column prop="inspectContentRangeValue" label="内容范围" min-width="160" show-overflow-tooltip>
                  <template #default="scope">
                    <div v-if="scope.row.inspectContentRangeCode === 1">文本</div>
                    <div v-if="scope.row.inspectContentRangeCode === 2">数字</div>
                    <div v-if="scope.row.inspectContentRangeCode === 3 && scope.row.inspectContentRangeValue">
                      判断：True={{ scope.row.inspectContentRangeValue.split(",")[0] }}; False={{ scope.row.inspectContentRangeValue.split(",")[1] }}
                    </div>
                    <div v-if="scope.row.inspectContentRangeCode === 4">选择：{{ scope.row.inspectContentRangeValue }}</div>
                  </template>
                </px-table-column>
              </px-table>
            </template>
          </EditDropDown>
          <EditDropDown v-if="item.inspectItemType === 1" :dropdownTitle="item.inspectItemContent">
            <template v-slot:content>
              <px-table :data="item.contentItemDTOList" style="margin-bottom: 18px" class="equip-table" size="small" max-height="400" border>
                <px-table-column fixed="left" prop="meterReadingModeDesc" label="抄表方式" min-width="80" show-overflow-tooltip />
                <px-table-column fixed="left" prop="meterReadingItem" label="抄表项" min-width="160" show-overflow-tooltip />
                <px-table-column prop="unit" label="单位" min-width="100" show-overflow-tooltip />
                <px-table-column prop="maxValue" label="最大值" min-width="100" show-overflow-tooltip />
                <px-table-column prop="minValue" label="最小值" min-width="100" show-overflow-tooltip />
              </px-table>
            </template>
          </EditDropDown>
        </div>
        <!-- </div> -->
      </px-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getInspectTemplate } from "@/api/equip/inspectTemplate";
import EditDropDown from "@/views/all/equip/components/EditDropDown.vue";
// import { useAuth } from "@/views/all/equip/inspect/hooks";
import { onMounted, reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import ColumnsTable from "../components/ColumnsTable.vue";
import { INSPECTT_TEMPLATE_ENV_BASEINFO_COLUMNS, INSPECTT_TEMPLATE_EQUIP_BASEINFO_COLUMNS } from "./config/index";
import { useAction } from "./hooks";
// const { isUpdator } = useAuth();
const props = defineProps(["type", "id"]);
// const showButton = data => {
//   const flag = isUpdator(data);
//   return flag;
// };
const actions = useAction();
const router = useRouter();
const route = useRoute();

// 页面本身的值
const state = reactive<any>({
  tabList: [
    { name: "first", label: "基础信息" },
    { name: "second", label: "巡检内容" }
  ],
  activeName: "first",
  baseInfoFormValue: {
    checkRuleNo: "",
    checkRuleName: "",
    facName: "",
    classNameDesc: "",
    systemName: "",
    checkTargetDesc: "",
    checkTarget: "",
    positionCodes: "",
    checkCycle: "",
    checkCycleUnitDesc: "",
    remark: ""
  },
  tableColumns: [
    { prop: "eqpId", label: "设备编号", minWidth: "160", showOverflowTooltip: true, fixed: "left" },
    { prop: "eqpName", label: "设备名称", minWidth: "160", showOverflowTooltip: true },
    { prop: "categoryName", label: "设备总称", minWidth: "160", showOverflowTooltip: true },
    { prop: "typeName", label: "设备类型", minWidth: "160", showOverflowTooltip: true },
    { prop: "modelName", label: "设备型号", minWidth: "160", showOverflowTooltip: true }
  ],
  equipTableData: [],
  templateContentDTOList: [],
  meterReadingPointObj: {},
  positionCodesList: []
});
const { baseInfoFormValue, equipTableData, templateContentDTOList, meterReadingPointObj, positionCodesList } = toRefs(state);
const getDetail = async () => {
  const {
    query: { id: routeId }
  } = route;
  const id = props.id || routeId;
  if (id) {
    const dataDetail = await getInspectTemplate(id);
    const { templateContentDTOList: list, inspectTemplateAreaDTOList = [], ...others } = dataDetail;
    templateContentDTOList.value = list;
    const inspectAreaDesc = inspectTemplateAreaDTOList.map(item => item.inspectAreaDesc).join();
    baseInfoFormValue.value = { ...others, inspectAreaDesc };
  }
};
onMounted(() => {
  getDetail();
});
const renderEqpList = data => {
  if (data) {
    return data.map(item => item.name).join("/");
  } else {
    return "-";
  }
};
// 返回主页面
const backMainPage = () => {
  actions.back();
};
// 递归树形结构
const findNode = (tree, func) => {
  for (const node of tree) {
    if (func(node)) return node;
    if (node.children) {
      const res = findNode(node.children, func);
      if (res) return res;
    }
  }
  return null;
};
// 编辑
const handleEdit = () => {
  actions.edit(baseInfoFormValue.value);
};
// 复制巡检
const handleCopy = () => {
  actions.copy(baseInfoFormValue.value);
};
// 删除
const handleDelete = () => {
  actions.delete(baseInfoFormValue.value, () => router.push("/all/equip/inspect/template"));
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

.view-equip-detail {
  height: calc(100vh - 126px);
  .view-comp {
    height: calc(100vh - 97px);
  }
}

.view-flex {
  height: calc(100vh - 210px);
  overflow: hidden;
  &.view-flex-comp {
    height: calc(100vh - 97px);
  }
}

.view-equip-header-detail {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;

  .flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .text {
    margin-left: 20px;
    font-size: 20px;
    font-weight: 600;
    color: rgb(0 0 0 / 90%);
  }

  .view-equip-title {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
</style>
